<template>
    <view>
	    <!--轮播图-->
		<homeswiper></homeswiper>
		
		<!--商品列表-->
		<view class="goodslist">
			<template v-for="goods in goodslist" :key="goods.spuId">
			    <goodsitem :value="goods"></goodsitem>
			</template>
		</view>
		
		
		<!--底-->
		<view class="btm"></view>
	
	</view>
</template>

<script setup>
   import {ref} from 'vue'
   import {onShow,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
   import {queryHome} from '@/api/goods.js'
   
   //分页信息
   const page=ref(1);//当前页
   const pageSize=ref(4);//每页记录数
   const total=ref(0);//总页数 
   
   //商品列表数据
   const goodslist=ref([]);
   
   //查询商品
   async function queryGoods(){
	   let res=await queryHome(page.value,pageSize.value);
	   if(res.code==200){
		   console.log(res)
		   //判断当前是否是第一页
		   if(page.value==1){
			     goodslist.value=res.data.records;
		   }else{
			   //将查询到的数据追加到现有列表上
			   //原有数据
			   let tmp=goodslist.value;
			   goodslist.value= tmp.concat(res.data.records);
		   }
		 
		   //接收分页信息
		   page.value=res.data.current;
		   total.value=res.data.pages;
	   }
   }
   
   //当用户下接
   onPullDownRefresh(()=>{
	   console.log("-----------用户下拉")
	   //将分页信息重置
	   page.value=1;
	   pageSize.value=4;
	   //重新查询
	   queryGoods();
	   uni.stopPullDownRefresh()
   });
   
   
   //当用户滚动到底时触发
   onReachBottom(()=>{
	   console.log("------------触底",(page.value < total.value))
	   //判断当前页是否是最后一页
	   if(page.value < total.value){
		   //说明不是最后一页 查询下一页数据 
		   page.value=page.value+1;
		   //查询
		   queryGoods();
	   }else{
		   uni.showToast({
			   "title":"没有更多数据了"
		   });
	   }
   });
   
   //当页面展示在前端时调用 
   onShow(()=>{
	   queryGoods();
   });
</script>

<style scoped>
.goodslist{
	width: 720rpx;
	margin: auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

}
.btm{
	height: 200rpx;
}
</style>
